<template>
  <div class="login_section">
    <!-- <div class="login_form"></div> -->

    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <div class="form_section">
          <el-form
            class="login_form"
            ref="ruleFormRef"
            :model="loginForm"
            :rules="rules"
          >
            <h1>Hello</h1>
            <h2>欢迎来到硅谷甄选</h2>

            <el-form-item prop="username">
              <el-input
                :prefix-icon="User"
                v-model="loginForm.username"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                :prefix-icon="Lock"
                type="password"
                show-password
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button
                :loading="loading"
                class="login_btn"
                type="primary"
                size="default"
                @click="login"
              >
                登录
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ElNotification } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { User, Lock } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import useUserStore from '@/store/modules/userStore'
let userStore = useUserStore()
import { GET_TIME, RETURN_TIME_STR } from '@/utils/time'
import ROUTER_API from '@/utils/router'
const { ROUTER_JUMP, GET_ROUTE } = ROUTER_API()

interface RuleForm {
  username: string
  password: string
}

const ruleFormRef = ref<FormInstance>()

let loading = ref(false)
let loginForm = reactive<RuleForm>({
  username: 'admin',
  password: '111111',
})

const rules = reactive<FormRules<RuleForm>>({
  username: [
    {
      trigger: 'change',
      validator: validatorUser,
    },
  ],
  password: [
    {
      trigger: 'change',
      validator: validatorPassword,
    },
  ],
})

function validatorUser(_rule: any, value: any, callback: any) {
  //   console.log(a, b, c)
  if (value.length >= 5) {
    callback()
  } else {
    callback(new Error('账号长度至少六位'))
  }
}
function validatorPassword(_rule: any, value: any, callback: any) {
  //   console.log(a, b, c)
  if (value.length >= 5) {
    callback()
  } else {
    callback(new Error('密码长度至少六位'))
  }
}
async function login() {
  if (!ruleFormRef.value) return
  await ruleFormRef.value.validate()
  let route = GET_ROUTE()

  loading.value = true
  try {
    await userStore.userLogin(loginForm)

    if (route.query.redirect) {
      ROUTER_JUMP(route.query.redirect)
    } else {
      ROUTER_JUMP('/')
    }
    ElNotification({
      type: 'success',
      message: '欢迎回来',
      title: `HI,${RETURN_TIME_STR(GET_TIME().hours)}好`,
    })
  } catch (error) {
    ElNotification({
      type: 'error',
      message: (error as Error).message,
    })
  } finally {
    loading.value = false
  }
}
</script>

<style scoped lang="scss">
.login_section {
  width: 100vw;
  height: 100vh;
  background: url('@/assets/images/background.jpg') no-repeat;
  background-size: cover;
  .form_section {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100vh;
    padding: 4%;
  }
  .login_form {
    width: 100%;
    max-width: 650px;
    background: url('@/assets/images/login_form.png') no-repeat;
    background-size: cover;
    padding: 4%;
    h1 {
      color: white;
      font-size: 40px;
    }

    h2 {
      font-size: 20px;
      color: white;
      margin: 20px 0px;
    }
    .login_btn {
      width: 100%;
    }
  }
}
</style>
